<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .box {
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border: 50px solid transparent;
            border-top-color: rgb(39, 80, 56);
            animation: animate 1s ease-in infinite alternate;
            position: relative;
            top: -300px;
        }
        
        @keyframes animate {
            0% {
                transition: translate(0, 0);
            }
            50% {
                border-top-color: rgb(166, 184, 125);
            }
            100% {
                transform: translate(0px, 50px);
            }
        }
        
        .imgs img {
            width: 200px;
            height: 200px;
            transition: all 1.5s;
        }
        
        div img:hover {
            box-shadow: 0 0 10px gray;
            transform: scale(1.5);
            transform: rotate(360deg);
        }
        
        .imgs {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 0px auto;
            overflow: hidden;
            border: 1px solid black;
        }
        
        .imgt {
            width: -500px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .imgt img {
            width: -500px;
            height: 400px;
            animation: scale 5s ease 1 forwards;
        }
        
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.5);
            }
        }
        
        .imgu {
            width: -500px;
            height: 400px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        .imgu img {
            width: -500px;
            height: 400px;
            animation: scale 5s ease 1 forwards;
        }
        
        @keyframes scale {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(1.5);
            }
        }
        
        .four:hover {
            transform: translate(10px, 20px) scale(1) rotate(25deg);
        }
        
        .y {
            transition: all 1s;
        }
        
        .y:hover {
            transform: translate(10px, 10px) scale(1) rotate(360deg);
        }
        
        .aaa {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 100px auto;
            overflow: hidden;
            border: 1px solid black;
        }
        
        .aaa img {
            width: 200px;
            height: 200px;
            transition: all 1.5s;
        }
        
        div img:hover {
            box-shadow: 0 0 10px gray;
            /* 若分开书写，根据CSS层叠性，只会作用最后一个转换效果 */
            transform: scale(1.5);
            transform: rotate(360deg);
        }
    </style>

</head>

<body>
    <img class="imgo" src="风铃.png" alt="">
    <div class="y">


        <h1>MY<br>PERSONAL<br> WEBSITE</h1>
    </div>
    <a href="#1" class="one"> Get into </a>
    <p></p>
    <a href="#l" class="c"> My design</a>
    <a href="#j" class="b">self-introduction</a>
    <a href="#f" class="a">My him</a>
    <a href="#" class="box"></a>
    <a href="#" class="box"></a>
    <a href="#" class="box"></a>
    <div id="1"></div>
    <div class="imgs">
        <img src="我2.jpg" alt="">
    </div>

    <h2> I <br><br> am a college student</h2><br><br></h2><br><br>
    <h3>A kind, beautiful and lovely young man<br><br><br>Here's something about me</h3><br>
    <br><br>
    <br><br><br>
    <div class="two" id="l"> My design</div>


    <h5>poster</h5>
    <img class="imgp" src="边框2.png" alt="">
    <div class="four">

        <img class="imgone" src="倾斜.jpg" alt="">
        <img class="imgtwo" src="满版型.jpg" alt="">
        <img class="imgthree" src="曲线型_画板 1.jpg" alt="">
        <br> <br>
        <img class="imgfour" src="中轴型.jpg" alt="">
        <img class="imgfive" src="左右排版.jpg" alt="">
        <img class="imgsix" src="女生.jpg" alt="">

    </div>
    <br> <br> <br><br>
    <div class="weizhi">
        <h5>Magaz<br>ine</h5>
        <img class="imgq" src="边框2.png" alt="">
    </div>

    <br> <br> <br><br>

    <div class="five">
        <section>
            <div class="9"><img class="imgseven" src="板式期末作业-07.jpg" alt=""></div>
            <div class="8"> <img class="imgeight" src="板式期末作业-02.jpg" alt=""></div>
            <div class="7"> <img class="imgnine" src="板式期末作业-06.jpg" alt=""></div>
            <br>
            <div class="6"><img class="imgten" src="板式期末作业-13.jpg" alt=""></div>
            <div class="5"><img class="imga" src="板式期末作业-14.jpg" alt=""></div>
            <div class="4"><img class="imga" src="板式期末作业-17.jpg" alt=""></div>
        </section>
    </div>
    <br><br> <br> <br>
    <div class="weizhi2">
        <h5> Other<br> works</h5>
        <img class="imgr" src="边框2.png" alt=""></div>

    <div class="z">

        <img class="imgd" src="吸管.jpg" alt="">
        <img class="imgc" src="我们.png" alt="">

        <img class="imgh" src="设计方法学-1-02.jpg" alt="">
        <img class="imgi" src="设计方法学-1-03.jpg" alt="">
        <img class="imgj" src="设计方法学-1-04.jpg" alt="">

        <img class="ima" src="1.jpg" alt="">
        <img class="imge" src="字体.jpg" alt="">


    </div>
    <br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="two" id="j">self-introduction</div>

    <h2>Good looking skins are the same<br><br>Interesting soul in a million</h2><br><br><br>
    <h3>This is me, a man with an interesting soul</h3><br><br><br>
    <div class="imgt"><img class="imgf" src="我.png" alt=""></div><br><br><br>
    <h3>Use a video screen to let you know me better</h3><br><br><br>
    <iframe class="vide " frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=i3211lghrfd" allowFullScreen="true"></iframe>
    <br><br><br>
    <h3>At the same time, I have many hobbies</h3><br><br>
    <h4> For example, drawing<br><br><br> watching movies<br><br><br> taking pictures<br><br><br> and playing games</h4>
    <br><br><br><br>


    <div class="two" id="f">My him</div>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <div class="love"></div>

    <div class="aaa">


        <img src="8.jpg" alt="">
        <img src="9.jpg" alt="">
    </div>

    <h3>It's not easy to meet the right person<br><br><br> And I met him</h3><br><br><br>

    <div class="imgu"> <img class="imgg" src="他.png" alt=""></div><br><br><br>
    <h3>of course</h3><br><br><br>
    <h3> How can a picture work</h3><br><br><br>
    <iframe class="vide " frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=z3211asecfk" allowFullScreen="true"></iframe>
    <br><br><br>
    <h3>That's all about me</h3>
    <br><br><br>
    <br><br><br>
    <h6> If you are interested in me, you can contact me through the following ways</h6>
    <br><br><br>
    <br><br><br>
    <img class="imgnn" src="weixing .png" alt="">
    <img class="imgnnn" src="qq.jpg" alt="">
    <img class="imgnnnn" src="douying.png" alt="">
    <br><br>

























</body>

</html>